

	<page-title ng-if="layoutOptions.pageTitles" title="Other Elements" description="Badges, labels and other Boostrap elements"></page-title>


<div class="row">
	
	<div class="col-sm-7">
		
		<div class="panel panel-default">
			<div class="panel-heading">
				Badges and Labels
			</div>
			
			<div class="panel-body">
				
				<div class="row">
					<div class="col-sm-5">
						
						<ul class="list-unstyled line-height-default">
							<li>
								Default label
								<span class="label label-default pull-right">5</span>
							</li>
							<li>
								Primary label
								<span class="label label-primary pull-right">4</span>
							</li>
							<li>
								Secondary label
								<span class="label label-secondary pull-right">8</span>
							</li>
							<li>
								Warning label
								<span class="label label-warning pull-right">3</span>
							</li>
							<li>
								Danger label
								<span class="label label-danger pull-right">9</span>
							</li>
							<li>
								Info label
								<span class="label label-info pull-right">1</span>
							</li>
							<li>
								Success label
								<span class="label label-success pull-right">5</span>
							</li>
							<li>
								Purple label
								<span class="label label-purple pull-right">2</span>
							</li>
							<li>
								Blue label
								<span class="label label-blue pull-right">7</span>
							</li>
							<li>
								Red label
								<span class="label label-red pull-right">1</span>
							</li>
							<li>
								Black label
								<span class="label label-black pull-right">8</span>
							</li>
							<li>
								White label
								<span class="label label-white pull-right">6</span>
							</li>
						</ul>
						
					</div>
					<div class="col-sm-5 col-sm-offset-2">
						
						<ul class="list-unstyled line-height-default">
							<li>
								Default badge
								<span class="badge badge-default pull-right">5</span>
							</li>
							<li>
								Primary badge
								<span class="badge badge-primary pull-right">4</span>
							</li>
							<li>
								Secondary badge
								<span class="badge badge-secondary pull-right">8</span>
							</li>
							<li>
								Warning badge
								<span class="badge badge-warning pull-right">3</span>
							</li>
							<li>
								Danger badge
								<span class="badge badge-danger pull-right">9</span>
							</li>
							<li>
								Info badge
								<span class="badge badge-info pull-right">1</span>
							</li>
							<li>
								Success badge
								<span class="badge badge-success pull-right">5</span>
							</li>
							<li>
								Purple badge
								<span class="badge badge-purple pull-right">2</span>
							</li>
							<li>
								Blue badge
								<span class="badge badge-blue pull-right">7</span>
							</li>
							<li>
								Red badge
								<span class="badge badge-red pull-right">1</span>
							</li>
							<li>
								Black badge
								<span class="badge badge-black pull-right">8</span>
							</li>
							<li>
								White badge
								<span class="badge badge-white pull-right">6</span>
							</li>
						</ul>
						
					</div>
				</div>
				
			</div>
		
			<div class="panel-body">
				
				<hr />
				<h5>Labels with Text</h5>
				
				<div class="bs-example">
					<div class="label label-default">Default</div>
					<div class="label label-primary">Primary</div>
					<div class="label label-secondary">Secondary</div>
					<div class="label label-info">Info</div>
					<div class="label label-warning">Warning</div>
					<div class="label label-danger">Danger</div>
					<div class="label label-success">Success</div>
					<div class="label label-purple">Purple</div>
					<div class="label label-red">Red</div>
					<div class="label label-blue">Blue</div>
				</div>
				
			</div>
			
		</div>
		
		<div class="panel panel-default">
			<div class="panel-heading">Code</div>
			
			<div class="panel-body">
			
				<div class="row">
					<div class="col-md-6">
						<h5>PRE Tags</h5>
						<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
					</div>
					<div class="col-md-6">
						<h5>CODE Tags</h5>
						For example, <code>&lt;section&gt;</code> should be wrapped as inline.
					</div>
				</div>
				
			</div>
		</div>
		
	</div>
	
	<div class="col-sm-5">
	
		<div class="panel panel-default">
			<div class="panel-heading">
				Popovers and Tooltips
			</div>
			
			<div class="panel-body">
				<h5>Popovers</h5>
				
				<p class="vertical-top">
					<button class="btn btn-primary popover-primary" popover-trigger="mouseenter" popover-placement="top" popover-title="Twitter Bootstrap Popover" popover="It's so simple to create a tooltop for my website!">I'm a Popover</button>
					<button class="btn btn-purple popover-purple" popover-trigger="mouseenter" popover-placement="bottom" popover-title="Twitter Bootstrap Popover" popover="It's so simple to create a tooltop for my website!">I'm a Popover</button>
					<button class="btn btn-secondary popover-secondary" popover-trigger="mouseenter" popover-placement="left" popover-title="Twitter Bootstrap Popover" popover="It's so simple to create a tooltop for my website!">I'm a Popover</button>
					<br />
					<button class="btn btn-blue popover-red" popover-trigger="mouseenter" popover-placement="right" popover-title="Twitter Bootstrap Popover" popover="It's so simple to create a tooltop for my website!">I'm a Popover</button>
					<button class="btn btn-white" popover-trigger="click" popover-placement="top" popover-title="Twitter Bootstrap Popover" popover="It's so simple to create a tooltop for my website!">Click me!</button>
				</p>
			</div>
			
			<div class="panel-body">
				<h5>Tooltips</h5>
				
				<p class="vertical-top">
					<button type="button" class="btn btn-primary tooltip-primary" tooltip="Tooltip on top" tooltip-placement="top">Tooltip on top</button>
					<button type="button" class="btn btn-secondary tooltip-purple" tooltip="Tooltip on right" tooltip-placement="right">Tooltip on right</button>
					<br />
					<button type="button" class="btn btn-white tooltip-blue" tooltip="Tooltip on left" tooltip-placement="left">Tooltip on left</button>
					<button type="button" class="btn btn-red tooltip-secondary" tooltip="Tooltip on bottom" tooltip-placement="bottom">Tooltip on bottom</button>
				</p>
			</div>
		</div>
		
		<div class="panel panel-default">
			<div class="panel-heading">Wells</div>
			<div class="panel-body">
				
				<div class="well">
					Look, I'm in a well!
				</div>
				
				<div class="well well-lg">
					Look, I'm in a well, but a large well!
				</div>
				
				<div class="well well-sm">
					Look, I'm in a small well!
				</div>
				
			</div>
		</div>
		
	</div>
	
</div>


<div class="row">
	<div class="col-sm-12">
	
		<div class="panel panel-default">
			<div class="panel-heading">
				List Groups
			</div>
			
			<div class="panel-body">
				
				<div class="row">
					<div class="col-sm-6">
						
						<h5>Simple List Group</h5>
					
						<ul class="list-group list-group-minimal">
							<li class="list-group-item">
								<span class="badge badge-roundless badge-primary">5,200</span>
								New users
							</li>
							<li class="list-group-item">
								<span class="badge badge-roundless badge-info">22,000</span>
								Daily visits
							</li>
							<li class="list-group-item">
								<span class="badge badge-roundless badge-danger">16.7%</span>
								Bounce rate
							</li>
							<li class="list-group-item">
								<span class="badge badge-roundless badge-success">11,340</span>
								Unique visitors
							</li>
							<li class="list-group-item">
								<span class="badge badge-roundless badge-warning">18,741</span>
								Return visitors
							</li>
						</ul>
						
					</div>
					<div class="col-sm-6">
						
						<h5>List Group with Links</h5>
						
						<div class="list-group list-group-minimal"><!-- Add class "list-group-minimal" for less padding between list items -->
							<a href="" class="list-group-item active">
								<span class="badge badge-primary">5</span>
								Inbox
							</a>
							<a href="" class="list-group-item">
								<span class="badge badge-info">14</span>
								Sent mail
							</a>
							<a href="" class="list-group-item">
								<span class="badge badge-danger">11</span>
								Drafts
							</a>
							<a href="" class="list-group-item">
								<span class="badge badge-success">3</span>
								All mail
							</a>
							<a href="" class="list-group-item">
								<span class="badge badge-warning">7</span>
								Spam
							</a>
						</div>
						
					</div>
					<div class="col-sm-12">
						
						<h5>List Group with Description</h5>
					
						<div class="list-group">
							<a href="" class="list-group-item active">
								<h4 class="list-group-item-heading">Domestic confined any but son</h4>
								<p class="list-group-item-text">Consider speaking me prospect whatever if. Ten nearer rather hunted six parish indeed number. Allowance repulsive sex may contained can set suspected abilities cordially. Do part am he high rest that. So fruit to ready it being views match. </p>
							</a>
							
							<a href="" class="list-group-item">
								<h4 class="list-group-item-heading">Why painful the sixteen how minuter</h4>
								<p class="list-group-item-text">Started his hearted any civilly. So me by marianne admitted speaking. Men bred fine call ask. Cease one miles truth day above seven. Suspicion sportsmen provision suffering mrs saw engrossed something. Snug soon he on plan in be dine some. </p>
							</a>
							
							<a href="" class="list-group-item">
								<h4 class="list-group-item-heading">Barton waited twenty always repair</h4>
								<p class="list-group-item-text">Talking chamber as shewing an it minutes. Trees fully of blind do. Exquisite favourite at do extensive listening. Improve up musical welcome he. Gay attended vicinity prepared now diverted. Esteems it ye sending reached as. Longer lively her design settle tastes advice mrs off who. </p>
							</a>
						</div>
						
					</div>
				</div>
				
				
			</div>
		</div>
	
	</div>
</div>